<template>
  <view class="fixed top-0 z-10 w-full bg-white fixed-search" v-bind="$attrs">
    <!--fixed-search-->
    <view class=" px-4 box-border flex h-12 items-center">
      <image class="w-6 h-5" src="@/static/image/search.png"></image>
      <input class="px-2 w-full h-full" type="text" placeholder="搜索 ID/用户编号/姓名" placeholder-class="plcg" v-model="searchQuery.keyword" @confirm="handleSearch">
      <view class="w-16 h-full flex items-center justify-center" @click="handleSearch">
        <text class="p-1 px-2 rounded bg-indigo-500 text-white text-sm ">搜索</text>
      </view>
    </view>

    <view class="py-2 min-h-8 px-4 flex gap-2 overflow-scroll" style="border-top: 2rpx solid #e5e7e9">
      <view v-for="item in removalArray" :key="item.uid">
        <image class="w-8 h-8 rounded-full" :src="item.avatar"></image>
      </view>
    </view>

  </view>

  <!--占位-->
  <view style="height: 200rpx;"></view>

  <!--已选中-->
  <!--<view class="py-2 min-h-8 px-4 flex gap-2 overflow-scroll">-->
  <!--  <view v-for="item in removalArray" :key="item.uid">-->
  <!--    <image class="w-8 h-8 rounded-full" :src="item.avatar"></image>-->
  <!--  </view>-->
  <!--</view>-->

  <view class="bg-gray-100 h-10 flex items-center px-4 justify-left text-slate-600 text-sm">
    用户列表
  </view>

  <view class="px-4" v-if="total">
    <!--@click="jumpUserInfo"-->
    <checkbox-group @change="checkboxChange">
      <label for="" v-for="item in mxDataList">
        <view class="flex items-center py-3 border-bottom">
          <view>
            <checkbox :value="JSON.stringify(item)" :checked="saveChecked(item.uid)" activeBackgroundColor="#1684fc" iconColor="#fff"></checkbox>
          </view>

          <view class="flex items-center ml-2">
            <image :src="item.avatar" class="w-8 h-8 rounded-full"></image>

            <view class="ml-2">
              <view class="text-slate-600 text-sm">{{ item.nickname }}</view>
              <view class="text-slate-600 text-sm">{{ item.uid }}</view>
            </view>

          </view>
          <view class="ml-auto">
            <view class="text-red-600 text-sm text-right">￥{{ item.recharge_amount }}</view>
            <view class="text-slate-600 text-xs text-right">{{ moment(item.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
          </view>
        </view>
      </label>
    </checkbox-group>
  </view>

  <view v-else>
    <image class="w-20 h-16 block m-auto mt-14" src="@/static/image/noData.png"></image>
    <view class="mt-2 text-center text-gray-400 text-sm">暂无数据</view>
  </view>

  <view class="queryBtn text-white leading-10 text-center fixed bottom-10 left-1/2 w-48 h-10 bg-indigo-500 text-blue-600 rounded-3xl" @click="jumpBack">
    确定
  </view>

</template>

<script setup lang="ts">
import { spreadCondPeopleApi } from '@/api/user/index'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, defineProps } from "vue";
import moment from "moment/moment";
import { onReachBottom } from "@dcloudio/uni-app";


onLoad((options:any) => {
  checkedArray.value = JSON.parse(options.userData)
  removalArray.value = JSON.parse(options.userData)
  getUserList()
})

const searchQuery = ref({
  keyword: '',
  page: 1,
  limit: 20
})

const mxDataList = ref<any[]>([])
const total = ref<number>(0)
const getUserList = async () => {
  const res = await spreadCondPeopleApi(searchQuery.value)
  mxDataList.value = [...mxDataList.value , ...res.data.data]
  total.value = res.data.total
}

/** 滚动底部 **/
onReachBottom(() => {
  if(mxDataList.value.length < total.value) {
    searchQuery.value.page += 1;
    getUserList()
  }
})

/** 当前勾选的用户 **/
const checkedArray = ref(<any>[])
/** 记录上一次勾选的用户 **/
const lastCheckedList = ref(<any>[])
/** 去重后勾选的用户 **/
const removalArray = ref(<any>[])

const checkboxChange = (e) => {
  const tranformArray = e.detail.value.map(str => JSON.parse(str))
  checkedArray.value = [...lastCheckedList.value, ...tranformArray]
  /** 去重 **/
  const map = new Map()
  removalArray.value = checkedArray.value.filter(v => !map.has(v.uid) && map.set(v.uid, v) )

  // console.log('checkedArray===', checkedArray.value)
  // console.log('newArr-------', removalArray.value)

}

/** 保存已经勾选 **/
const saveChecked = (uid) => {
    const flag = removalArray.value.some(item => {
      if(item.uid == uid) return true
      else return false
    })
    return flag
}

/** 搜索 **/
const handleSearch = async () => {
  console.log('checkedArray===', checkedArray.value)
  // 先记录上一次保存记录
  lastCheckedList.value = JSON.parse(JSON.stringify(checkedArray.value))

  mxDataList.value = []
  searchQuery.value.page = 1;
  getUserList()
}

const jumpBack = () => {
  uni.navigateBack({
    success() {
      uni.$emit('selectUser', { paiList: removalArray.value })
    },
  })
}
</script>

<style scoped lang="scss">
.fixed-search {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.queryBtn {
  transform: translateX(-50%);
  box-shadow: 0 0.08rem 0.186667rem 0 rgba(81, 108, 204, 0.57);
}
</style>
